<template>
	<div class="distributionGoods">
		<el-card shadow="hover">
			<div class="system-user-search mb15">
				<el-form ref="formDataRef" :inline="true" :model="searchForm" label-width="90px" class="demo-form-inline">
					<el-row>
						<el-col :span="24">
							<el-form-item prop="keyword" label="" style="width: 100%">
								<el-button type="success" @click="onOpenAdd">添加分销商品</el-button>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item prop="keyword" label="关键词:" style="width: 100%">
								<el-input maxlength="200" v-model="searchForm.keyword" placeholder="关键词" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item prop="productId" label="商品ID" style="width: 100%">
								<el-input maxlength="200" v-model.number="searchForm.productId" placeholder="商品ID" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item prop="productCategoryId" label="分类" style="width: 100%">
								<CateSelector v-model="searchForm.productCategoryId" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item>
								<div style="margin-left: 10px">
									<el-button type="primary" @click="init">搜索</el-button>
									<el-button @click="resetForm">重置</el-button>
								</div>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<el-table :data="tableData" table-layout="auto" style="width: 100%" height="480" class="sku_table">
				<el-table-column type="index" label="序号" width="60">
					<template #default="scope">
						<span>{{ (page.current - 1) * page.pageSize + scope.$index + 1 }}</span>
					</template>
				</el-table-column>
				<el-table-column prop="pic" label="商品图">
					<template #default="scope">
						<img width="60" :src="scope.row.pic" alt="" />
					</template>
				</el-table-column>
				<el-table-column prop="productName" label="商品名称" show-overflow-tooltip />
				<el-table-column prop="skuCode" label="自编SKU" width="90" show-overflow-tooltip />
				<el-table-column prop="externalSku" label="外部SKU" width="90" show-overflow-tooltip />
				<el-table-column prop="supplierSku" label="供应商SKU" width="100" show-overflow-tooltip />
				<el-table-column label="佣金比例" width="135" show-overflow-tooltip>
					<template #default="scope">
						<div class="sort_text" v-if="!scope.row.isEdit">
							<el-button text @click="toEdit(scope.row)" type="primary">
								{{ scope.row.commissionRate }}
							</el-button>
						</div>
						<div class="sort_input" v-else>
							<el-input maxlength="100" v-model="commissionRate" placeholder="请输入佣金比例" clearable></el-input>
							<div class="btn_box" style="padding-top: 5px">
								<el-button size="small" type="primary" @click="toSaveEdit(scope.row)">提交</el-button>
								<el-button size="small" @click="scope.row.isEdit = flase">取消</el-button>
							</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column label="价格">
					<template #default="scope">
						<p v-show="scope.row.usPrice !== undefined && scope.row.usPrice !== null">${{ scope.row.usPrice }}</p>
						<p v-show="scope.row.ukPrice !== undefined && scope.row.ukPrice !== null">£{{ scope.row.ukPrice }}</p>
						<p v-show="scope.row.euPrice !== undefined && scope.row.euPrice !== null">€{{ scope.row.euPrice }}</p>
					</template>
				</el-table-column>
				<el-table-column prop="updateTime" label="最后修改时间" show-overflow-tooltip>
					<template #default="scope">
						<span>
							{{ $filters.timeFormat(scope.row.updateTime) }}
						</span>
					</template>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="120px">
					<template #default="scope">
						<el-button text @click="onOpenEdit(scope.row)" type="primary">编辑</el-button>
						<el-popconfirm title="请确认是否删除？" @confirm="onRowDel(scope.row.id)">
							<template #reference>
								<el-button text :disabled="scope.row.publishStatus === 1" type="danger">删除</el-button>
							</template>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				class="mt15"
				:pager-count="5"
				:page-sizes="[10, 20, 30]"
				v-model:current-page="page.current"
				background
				v-model:page-size="page.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="page.total"
			>
			</el-pagination>
		</el-card>
		<el-dialog title="添加分销商品" v-model="isShowModal" width="80%" destroy-on-close>
			<GoodsListModal ref="goodsDetailModalRef" />
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancelGoodsDetailModal">取消</el-button>
					<el-button type="primary" @click="onSubmitList(goodsDetailModalRef)">确认</el-button>
				</span>
			</template>
		</el-dialog>
		<el-dialog title="分销商品编辑" v-model="isShowEditModal" width="40%" destroy-on-close>
			<GoodsEdittModal ref="goodsEdittModalRef" :goodsInfo="goodsInfo" />
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancelGoodsEditModal">取消</el-button>
					<el-button type="primary" @click="onSubmitEdit(goodsEdittModalRef)">确认</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>
<script setup name="DistributionGoods">
import { ElMessage } from 'element-plus';
import CateSelector from '/@/components/common/CateSelector.vue';
import GoodsListModal from './component/GoodsListModal.vue';
import GoodsEdittModal from './component/GoodsEdittModal.vue';
import { useProductApi } from '/@/api/product';

const { getProdSkuList, editProd, updateCommission } = useProductApi();

const goodsDetailModalRef = ref();
const goodsEdittModalRef = ref();
const isShowModal = ref(false);
const isShowEditModal = ref(false);
const searchForm = ref({
	commissionType: 1,
});
const page = ref({
	current: 1,
	pageSize: 10,
	total: 0,
});
const tableData = ref([]);
const resetForm = () => {};
const onOpenAdd = () => {
	isShowModal.value = true;
};

const init = async () => {
	let res = await getProdSkuList({ ...searchForm.value, ...page.value });
	if (res.code === 200) {
		const { data, total } = res.data;
		let tbData;
		tbData = data.map((item) => {
			item.isSort = false;
			item.isEdit = false;
			return item;
		});
		tableData.value = tbData;
		page.value.total = total;
	}
};

const commissionRate = ref({});
const toEdit = (item) => {
	item.isEdit = true;
	commissionRate.value = item.commissionRate;
};
const toSaveEdit = (item) => {
	console.log(item);
};

const onCancelGoodsDetailModal = () => {
	isShowModal.value = false;
};

const onRowDel = () => {};

const onSubmitList = async (detailEL) => {
	console.log(detailEL.productList.length);
	if (!detailEL.productList.length) return ElMessage.error('您没有选择商品，请先选择商品');
	const idList = detailEL.productList.map(({ id }) => id);
	let res = await updateCommission({ idList, commissionType: 1 });
	if (res.code == 200) {
		init();
		ElMessage.success('保存成功');
		isShowModal.value = false;
	}
};

const goodsInfo = ref({});
const onOpenEdit = (item) => {
	goodsInfo.value = item;
	isShowEditModal.value = true;
};
const onCancelGoodsEditModal = () => {
	isShowEditModal.value = false;
};
const onSubmitEdit = async (detailEL) => {
	let res = await editProd(detailEL.formData);
	if (res.code === 200) {
		init();
		ElMessage.success('保存成功!');
		isShowEditModal.value = false;
	}
};

// 分页改变
const onHandleSizeChange = (val) => {
	page.value.pageSize = val;
	init();
};
// 分页改变
const onHandleCurrentChange = (val) => {
	page.value.pageNum = val;
	init();
};
// 页面加载时
onMounted(() => {
	init();
});
</script>
<style lang="scss" scoped></style>
